<template>
	<view class="content">
		<view style="text-align: center;font-size: 50rpx; padding: 69rpx;color: #fff;">
			抽奖大转盘
		</view>
		<!-- 抽奖 popup -->
		<!-- <uni-popup ref="lotteryPopup"> -->
		<view class="almost-lottery__popup-wrap">
			<almost-lottery canvas-id="lotteryPopup" :dev-mode="isDev" :render-delay="300"
				:lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize" :ring-count="3"
				:duration="3" :self-rotaty="false" :img-circled="true" :canvasCached="true" :prize-list="prizeList"
				:prize-index="prizeIndex" @reset-index="prizeIndex = -1" @draw-before="handleDrawBefore"
				@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"
				v-if="prizeList.length" :str-font-size="30" />
		</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	// import axios from 'axios'
	import {
		createCoupon,
		userDrowsNum
	} from '@/api/user'
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	export default {
		components: {
			AlmostLottery
		},
		onLoad() {
			let token = uni.getStorageSync('X-Access-Token') ? true : false
			if (!token) {
				uni.navigateTo({
					url: '/pages/index/index',
				})
			}

			this.handleOpenPopup();
		},
		data() {
			return {
				userInfo: uni.getStorageSync('user'),
				role: [],
				dingFlag: true,
				winWidth: 100,
				winHeight: 100,
				QRcodeSrc: '',
				showQrcode: false,
				url: '',
				value: '',
				// 开启调试模式
				isDev: true,
				// 以下是转盘配置相关数据
				lotteryConfig: {
					// 抽奖转盘的整体尺寸，单位rpx
					lotterySize: 600,
					// 抽奖按钮的尺寸，单位rpx
					actionSize: 200
				},


				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 奖品是否设有库存
				onStock: true,
				// 中奖下标
				prizeIndex: -1,

				// 是否正在抽奖中，避免重复触发
				prizeing: false,

				// 以下为中奖概率有关数据
				// 是否由前端控制概率，默认不开启，强烈建议由后端控制
				onFrontend: true,
				// 权重随机数的最大值
				prizeWeightMax: 0,
				// 权重数组
				prizeWeightArr: [],
			}
		},
		created() {
			console.log(this.userInfo.nickName);
			// this.handleOpenPopup();
		},
		onShow() {

		},
		methods: {
			// 通过 popup 打开
			handleOpenPopup() {
				// this.$refs.lotteryPopup.open()
				this.$nextTick(() => {
					if (!this.prizeList.length) {
						this.getPrizeList()
					}
				})
			},
			// 获取奖品列表
			async getPrizeList() {
				uni.showLoading({
					title: '奖品准备中...'
				})

				// 等待接口返回的数据进一步处理
				let res = await this.requestApiGetPrizeList()
				console.log('获取奖品列表', res)

				if (res.ok) {
					let data = res.data
					if (data.length) {
						this.prizeList = data
						console.log('已获取到奖品列表数据，开始绘制抽奖转盘')

						// 计算开始绘制的时间
						if (console.time) {
							console.time('绘制转盘用时')
						}

						// 如果开启了前端控制概率
						// 得出权重的最大值并生成权重数组
						if (this.onFrontend) {
							// 生成权重数组并排序取得最大值
							this.prizeWeightArr = this.prizeList.map(item => item.prizeWeight)
							let prizeWeightArrSort = [...this.prizeWeightArr]
							prizeWeightArrSort.sort((a, b) => b - a)

							// 开放自定义权重最大值，没有自定义则取权重数组中的最大值
							this.prizeWeightMax = this.prizeWeightMax > 0 ? this.prizeWeightMax : prizeWeightArrSort[0]
						}
					}
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '获取奖品失败',
						mask: true,
						icon: 'none'
					})
				}
			},
			// 模拟请求 获取奖品列表 接口，
			// 注意这里返回的是一个 Promise
			// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
			requestApiGetPrizeList() {
				return new Promise((resolve, reject) => {
					let requestTimer = setTimeout(() => {
						clearTimeout(requestTimer)
						requestTimer = null

						// prizeStock 奖品库存
						// prizeWeight 中奖概率，数值越大中奖概率越高，权重一样时随机中奖
						resolve({
							ok: true,
							data: [{
									prizeId: 1,
									prizeName: '0.5元优惠券',
									prizeStock: 10,
									prizeWeight: 200,
									price: '0.5'
								},
								{
									prizeId: 2,
									prizeName: '1元优惠券',
									prizeStock: 10,
									prizeWeight: 3000,
									price: '1'
								},
								{
									prizeId: 3,
									prizeName: '1.5元优惠券',
									prizeStock: 10,
									prizeWeight: 2000,
									price: '1.5'
								},
								{
									prizeId: 4,
									prizeName: '2元优惠券',
									prizeStock: 10,
									prizeWeight: 1000,
									price: '2'
								},
								{
									prizeId: 5,
									prizeName: '2.5元优惠券',
									prizeStock: 10,
									prizeWeight: 0,
									price: '2.5'
								},
								{
									prizeId: 6,
									prizeName: '3元优惠券',
									prizeStock: 8,
									prizeWeight: -888,
									price: '3'
								},
								{
									prizeId: 7,
									prizeName: '3.5元优惠券',
									prizeStock: 100,
									prizeWeight: -999,
									price: '3.5'
								},
								{
									prizeId: 8,
									prizeName: '4元优惠券',
									prizeStock: 100,
									prizeWeight: -1000,
									price: '4'
								}
							]
						})
					}, 200)
				})
			},
			// 抽奖开始之前
			handleDrawBefore(callback) {
				console.log('抽奖开始之前')
				userDrowsNum({
						openId: uni.getStorageSync('user').userId
					}, 'get')
					.then((res) => {
						if (res > 0) {
							let flag = true
							callback(flag)
						} else {
							uni.showToast({
								title: '剩余次数为' + res + '无法进行抽奖',
								mask: true,
								icon: 'none'
							})
						}
					})

			},
			// 本次抽奖开始
			handleDrawStart() {
				console.log('触发抽奖按钮')
				if (this.prizeing) return
				this.prizeing = true

				this.tryLotteryDraw()
			},
			// 尝试发起抽奖
			tryLotteryDraw() {
				console.log('旋转开始，获取中奖下标......')
				// 判断是否由前端控制概率
				if (this.onFrontend) {
					this.localGetPrizeIndex()
				} else {
					this.remoteGetPrizeIndex()
				}
			},
			// 本地获取中奖下标
			localGetPrizeIndex() {
				console.warn('###当前处于前端控制中奖概率，安全起见，强烈建议由后端控制###')
				// 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
				// 后端控制概率的情况下，通常会直接返回 prizeId
				if (!this.prizeWeightMax || !this.prizeWeightArr.length) {
					console.warn('###当前已开启前端控制中奖概率，但是奖品数据列表中的 prizeWeight 参数似乎配置不正确###')
					return
				}
				console.log('当前权重最大值为 =>', this.prizeWeightMax)

				// 注意这里使用了 Math.ceil，如果某个权重的值为 0，则始终无法中奖
				let randomWeight = Math.ceil(Math.random() * this.prizeWeightMax)
				console.log('本次权重随机数 =>', randomWeight)

				// 生成大于等于随机权重的数组
				let tempMaxArrs = []
				this.prizeList.forEach((item) => {
					if (item.prizeWeight >= randomWeight) {
						tempMaxArrs.push(item.prizeWeight)
					}
				})
				console.log('tempMaxArrs', tempMaxArrs)

				// 如果大于随机权重的数组有值，先对这个数组排序然后取值
				// 反之新建一个临时的包含所有权重的已排序数组，然后取值
				let tempMaxArrsLen = tempMaxArrs.length
				if (tempMaxArrsLen) {
					tempMaxArrs.sort((a, b) => a - b)
					// 取值时，如果存在多个值，分两种情况
					if (tempMaxArrsLen > 1) {
						// 检查是否存在重复的值
						let sameCount = 0
						for (let i = 0; i < tempMaxArrs.length; i++) {
							if (tempMaxArrs[i] === tempMaxArrs[0]) {
								sameCount++
							}
						}

						// 值不相等的情况下取最接近的值，也就是第1个值
						if (sameCount === 1) {
							this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0])
						} else {
							// 存在值相等时，随机取值，当然这里你可以自己决定是否随机取值
							let sameWeight = tempMaxArrs[0]
							let sameWeightArr = []
							let sameWeightItem = {}
							this.prizeWeightArr.forEach((item, index) => {
								if (item === sameWeight) {
									sameWeightArr.push({
										prizeWeight: item,
										index
									})
								}
							})
							console.log('sameWeightArr', sameWeightArr)
							sameWeightItem = sameWeightArr[Math.floor(Math.random() * sameWeightArr.length)]
							console.log('sameWeightItem', sameWeightItem)
							this.prizeIndex = sameWeightItem.index
						}
					} else {
						this.prizeIndex = this.prizeWeightArr.indexOf(tempMaxArrs[0])
					}
				}

				console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)

				// 如果奖品设有库存
				if (this.onStock) {
					console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].prizeStock)
				}
			},
			// 远程请求接口获取中奖下标
			// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
			remoteGetPrizeIndex() {
				console.warn('###当前处于模拟的请求接口，并返回了中奖信息###')
				// 模拟请求接口获取中奖信息
				let stoTimer = setTimeout(() => {
					stoTimer = null

					let list = [...this.prizeList]

					// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
					let prizeId = Math.floor(Math.random() * list.length + 1)

					// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
					for (let i = 0; i < list.length; i++) {
						let item = list[i]
						if (item.prizeId === prizeId) {
							// 中奖下标
							this.prizeIndex = i
							break
						}
					}

					console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)

					// 如果奖品设有库存
					if (this.onStock) {
						console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].prizeStock)
					}
				}, 200)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				console.log('旋转结束，执行拿到结果后到逻辑')

				// 旋转结束后，开始处理拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].prizeName;

				let price = this.prizeList[this.prizeIndex].price;

				let tipContent = ''

				if (prizeName === '谢谢参与') {
					tipContent = '很遗憾，没有中奖，请再接再厉！'
				} else {
					// 如果奖品设有库存
					if (this.onStock) {
						let prizeStock = this.prizeList[this.prizeIndex].prizeStock
						tipContent = prizeStock ? `恭喜您，获得 ${prizeName}` : `很抱歉，您来晚了，当前奖品 ${prizeName} 已无库存`
					} else {
						tipContent = `恭喜您，获得 ${prizeName} ！`
					}
				}

				// createCoupon({
				// 		openId: uni.getStorageSync('user').userId,
				// 		amount: price
				// 	}, 'get')
				// 	.then((res) => {
				// 		if (res.couponCode) {
				// 			uni.showModal({
				// 				content: tipContent,
				// 				showCancel: false,
				// 				complete: () => {
				// 					this.prizeing = false;
				// 					uni.reLaunch({
				// 						url: '/pages/expressPages/expressPages'
				// 					})
				// 				}
				// 			})
				// 		}
				// 	})
				console.log(price)


			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				console.log('抽奖转盘绘制完成', res)

				if (res.ok) {
					// 计算结束绘制的时间
					if (console.timeEnd) {
						console.timeEnd('绘制转盘用时')
					}
				}

				let stoTimer = setTimeout(() => {
					stoTimer = null

					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						mask: true,
						icon: 'none'
					})
				}, 50)
			},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 14px;
		background-color: #ff7600;
		height: -webkit-fill-available;

		.nav {
			box-shadow: 0px 0px 4px 0px rgba(96, 112, 138, 0.05);
			border-radius: 8px;
			background-color: #fff;
			display: flex;

			.avater {
				width: 64px;
				height: 64px;
				border-radius: 8px;
				border: 2px solid #ffffff;
			}

			.user {
				margin-left: 20px;
				padding-top: 10px;
				font-size: 16px;
				font-weight: 500;
				color: #000000;
			}

			.phone {
				margin-left: 20px;
				padding-top: 10px;
				font-size: 16px;
				font-weight: 500;
				color: #000000;
			}
		}

		.role {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30px;
			margin-left: 14px;

			p {
				font-size: 12px;
				border-radius: 4px;
				border: 1px solid #e0e2e4;
				padding: 2px 4px;
				margin-right: 4px;
				margin-bottom: 4px;
			}
		}
	}

	.logout {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eaeaea;
		font-size: 16px;

		image {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}
	}

	.logout1 {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eaeaea;
		font-size: 16px;

		image {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}
	}
</style>